<template>
  <div class="address_detail">
    <van-nav-bar
      :title="type == 0 ? addTitle : editTitle"
      class="nav_bar"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="form_1">
      <van-field
        v-model="field.name"
        input-align="right"
        :border="false"
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        v-model="field.mobile"
        input-align="right"
        label="手机号码"
        :border="false"
        placeholder="请输入电话"
      />
      <van-field
        v-model="area"
        input-align="right"
        :border="false"
        label="地区"
        readonly
        placeholder="请选择地区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field
        v-model="field.detail"
        input-align="right"
        :border="false"
        label="详细地址"
        placeholder="请输入地址"
      />
    </div>
    <div class="form_2">
      <van-field name="switch" label="设为默认地址" input-align="right">
        <template #input>
          <van-switch
            v-model="field.isDefault"
            class="default_icon"
            inactive-color="#e9e9ea"
          />
        </template>
      </van-field>
    </div>
    <div class="bottom">
      <div class="btn" @click="submit">保存</div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      field: {
        id: "",
        name: "",
        mobile: "",
        consigneeAddressPath: "",
        detail: "",
        isDefault: false,
      },
      isDefault: false,
      area: "",
      showArea: false,
      areaList,
      addTitle: "新增收货地址",
      editTitle: "编辑收货地址",
      type: 0, // 新增 1编辑
      id: -1,
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["addressList"]),
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onConfirm(values) {
      this.area = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(" ");
      // this.field.receiverProvince = values[0].name;
      // this.field.receiverCity = values[1].name;
      // this.field.receiverRegion = values[2].name;
      this.field.consigneeAddressPath = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(",");

      this.showArea = false;
    },
    async submit() {
      if (this.type == 0) {
        await api.addAddress(this.field);
      } else {
        await api.editAddress(this.field);
        if (this.isDefault) {
          await api.setDefaultAddress(this.field.id);
        }
      }
      Toast({
        message: "操作成功",
        duration: 1200,
      });
      setTimeout(() => {
        this.$router.back();
      }, 1000);
    },
    async getAddressInfo() {
      let res = this.addressList.find((item) => item.id == this.id);
      // let res = await api.getAddressDetail(this.id);
      this.field = JSON.parse(JSON.stringify(res));
      Reflect.deleteProperty(this.field, "userId");
      this.area = this.field.consigneeAddressPath.replaceAll(",", " ");
      this.field.isDefault = !!res.isDefault;
    },
  },
  created() {},
  mounted() {
    this.type = this.$route.query.type || 0;
    if (this.type == 1) {
      this.id = this.$route.query.id;
      this.getAddressInfo();
    }
  },
};
</script>
<style lang="less" scoped>
.address_detail {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 150px 50px;

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .form_1,
  .form_2 {
    padding: 40px 20px;
    background: #fff;
    border-radius: 10px;
  }

  .form_2 {
    margin-top: 30px;

    .default_icon {
      width: 150px;
      height: 80px;
      border-radius: 80px;
    }

    /deep/ .van-switch__node {
      width: 80px;
      height: 80px;
    }

    /deep/ .van-switch--on .van-switch__node {
      transform: translateX(80px);
    }
  }

  .bottom {
    margin-top: 200px;
    width: 100%;
    padding: 0 100px;

    .btn {
      height: 150px;
      padding: 0 50px;
      background: #068ffb;
      border-radius: 999px;
      text-align: center;
      line-height: 150px;
      font-size: 60px;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
